<template>
  <div class="default-preview">
    <div class="preview-container">
      <div class="file-icon">
        <FileTypeIcon :fileType="fileInfo.fileType" />
      </div>
      
      <div class="file-details">
        <h3 class="file-name">{{ fileInfo.fileName }}</h3>
        <p class="file-type">{{ fileInfo.fileType}}</p>
        <p class="preview-tip">此文件类型暂不支持预览</p>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="downloadFile">
          <el-icon><Download /></el-icon>
          下载文件
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FileTypeIcon from '@/components/FileTypeIcon.vue'

const props = defineProps({
  fileInfo: {
    type: Object,
    default: () => ({})
  }
})

// 文件类型显示文本
const fileTypeText = computed(() => {
  const typeMap = {
    'doc': '文档文件',
    'pdf': 'PDF文件',
    'image': '图片文件',
    'video': '视频文件',
    'audio': '音频文件',
    'folder': '文件夹'
  }
  return typeMap[props.fileInfo.fileType] || '未知文件类型'
})

// 下载文件
const downloadFile = () => {
  if (props.fileInfo.fileUrl) {
    const a = document.createElement('a')
    a.href = props.fileInfo.fileUrl
    a.download = props.fileInfo.fileName || 'file'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    ElMessage.success('下载开始')
  }
}
</script>

<style scoped>
.default-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
}

.preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
  background: #fafafa;
  border-radius: 12px;
  max-width: 400px;
}

.file-icon {
  margin-bottom: 24px;
}

.file-details {
  margin-bottom: 32px;
}

.file-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  word-break: break-all;
}

.file-type {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
}

.preview-tip {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
}
</style>
